iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0

在CSS中,美化文字可以通過多種方式來呈現,以下是一些常用的CSS屬性和技巧,用於提升文本的美觀度:

1. font-size

font-size用於設置文本的字體大小。你可以使用以下單位:

  • 絕對單位px(像素)、pt(點),例如:font-size: 16px;
  • 相對單位emrem,例如:font-size: 1.5em;
  • 百分比:例如:font-size: 120%;

範例

p {
    font-size: 18px;
}
h1 {
    font-size: 2em;
}

2. font-family

font-family用於設置文本的字體。通常會指定多個字體,最後是一個通用字體(如serifsans-serif)作為回退。

範例

body {
    font-family: 'Arial', 'Helvetica', sans-serif;
}

3. font-weight

font-weight用於設置字體的粗細。常用值有:

  • 關鍵詞normal(正常)、bold(加粗)
  • 數值100900(從極細到極粗),例如:font-weight: 700;

範例

strong {
    font-weight: bold;
}
h2 {
    font-weight: 600;
}

4. line-height

line-height用於設置文本行間距。可以使用數值、百分比、或單位。通常,值為1.5表示1.5倍的字體大小。

範例

p {
    line-height: 1.6;
}

5. text-align

text-align用於設置文本的水平對齊方式。常見值有:

  • 左對齊left
  • 右對齊right
  • 居中對齊center
  • 兩端對齊justify

範例

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

以上各屬性可組合使用,以控制文本的顯示效果。例如:

article {
    font-family: 'Georgia', serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

這個例子設置了一篇文章的字體、大小、粗細、行高和對齊方式,達到易讀的排版效果。


上一篇
Day 9 CSS的命名規則
下一篇
Day 11 雲端字型
系列文
從零開始的HTML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言